/*normal state*/
ul.menu {
/*dimension*/
  padding: 0;
  margin: 0;
  border-width: 1px;

/*position*/
  z-index: 999;
  position: absolute;
  cursor: default;

  /*style*/
  border-style: solid;

/*color*/
  border-color: gray;
  background-color: window;

/*eof ulmenu*/
}

/*active state*/
ul.menu.active {

  >li.menuShown {
    background-color: inherit;

    &:hover {
      background-color: #add8e6;
    }
  }
/*eof ul.menu.active*/
}

//eof ul.menu.active

/*scrollable state*/
ul.menu.scrollable {
  overflow: hidden;

/*scroll grip*/
  li.scroller {

  /*dimension*/
    height: 6px;
    padding: 3px 0;
    cursor: default;

  /*color*/
    background-color: buttonface;

  /*position*/
    position: absolute;
    left: 0;
    right: 0;
    z-index: 999;

    span {
      display: block;
      width: 7px;
      height: 4px;
      margin: 0 auto;
      background: no-repeat center center;
    }

  /*eof li.scroller*/
  }

/*hover state*/
  li.scroller:hover {
  /*color*/
    background-color: buttonface;

  /*dimension*/
    border-width: 1px;

  /*color*/
    border-style: solid;
    border-color: buttonshadow buttonhighlight buttonhighlight buttonshadow;

    span {
      width: 8px;
      height: 5px;
    }
  /*eof li.scroller:hover*/
  }

/*upper grip*/
  li.scroller.up {
    top: 0;
    display: none;
//    position: fixed;
//    top: 4px;
    span {
      background-image: url('../../image/undecorated/up.png');
    }
  }

/*lower grip*/
  li.scroller.down {
    bottom: 0;
    span {
      background-image: url('../../image/undecorated/down.png');
    }
  }

/*eof ul.menu.scrollable*/
}

/*menu item*/
ul.menu li {
/*dimension*/
  margin: 0;
  padding: 3px 30px 3px 22px;

/*position*/
  position: relative;

/*style*/
  list-style: none;
  cursor: pointer;
  display: block;
  white-space: nowrap;

  a {
    text-decoration: none;
    color: inherit;
  }

  &:hover, &.menuShown {
    background-color: #add8e6;
  }

/*check mark*/
  div.checkbox { //      border: solid 1px red;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 7px; //8
    top: 8px; //4
    background: url('../../image/undecorated/checked.gif') no-repeat;
  }

/*radio mark*/
  &.radio div.checkbox {
    background-image: url('../../image/undecorated/radio.gif');
  }
}

/*separator*/
ul.menu li.separator {
  padding: 4px 5px 4px 15px;
  cursor: default;

  &:hover {
    background-color: inherit;
  }
  span {
    display: block;
    height: 1px;
    background-color: gray;
  }

}

/*has submenu*/
ul.menu li.hasMenu {
  .arrow {
    position: absolute;
    background: url('../../image/undecorated/arrow-right.gif') no-repeat left center;
    width: 4px;
    height: 100%;
    right: 10px;
    top: 0;
  }
  ul {
    position: absolute;
  }

}

/*disabled*/
ul.menu li.disabled {
  color: silver;
  cursor: default;

  &:hover {
    background-color: inherit;
  }

  a {
    cursor: default;
  }
}

/*iconed*/
ul.menu.icon {

  > li {
    padding-left: 30px;

    > img.icon {
      position: absolute;
      left: 8px;
      top: 3px;
    }

    &[data-checked='1'] > img.icon {
      top: 3px;
    }

    &.separator {
      padding-left: 8px;
    }

    > div.checkbox {
      left: 12px;
      top: 10px;
    }
  }

  >li.icon {
    >div.checkbox {
      border: solid 1px;
      border-color: buttonshadow;// buttonhighlight buttonhighlight buttonshadow;
      background: url('../../image/undecorated/halftone.png') repeat;
      width: 18px;
      height: 18px;
      left: 6px;
      top: 1px;
    }
  }
}